import React, { PureComponent } from 'react'
import { Form, Input, Button } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { actions, getUser } from '../../store/modules/login'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

class Login extends PureComponent {
  render() {
    let {r:{changeUser,doLogin},history:{push}} = this.props
    return (
      <div className='login'>
        <Header title="登录" register></Header>
        <Form layout='horizontal'>
          <Form.Item label='账号' name='username'>
            <Input placeholder='请输入手机号' clearable onChange={(v)=>changeUser('phone',v)}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password' onChange={(v)=>changeUser('password',v)}/>
          </Form.Item>
        </Form>
        <p style={{ textAlign: 'center' }}>
          <Button color='warning' size='middle' onClick={() => doLogin(push)}>登录</Button>
        </p>
      </div>
    )
  }
}

export const mapStateToProps = state =>{
  return {
    user:getUser(state)
  }
}

export const mapDispatchToProps = dispatch =>{
  return {
    r:bindActionCreators(actions,dispatch)
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Login)